<template>
<div>
  <el-table
            :data="OrderArr"
            style="width: 100%">
    <!--type=index 设置这一列显示的内容为编号-->
    <el-table-column type="index" label="编号" width="60px" align="center"></el-table-column>
    <el-table-column
        label="商品图片"
        width="100"
        align="center">
      <template slot-scope="scope">
        <!--scope.row代表当前行对应数组中的对象-->
        <img :src="scope.row.url" width="100%">
      </template>
    </el-table-column>
    <el-table-column prop="title" label="商品标题" align="center"></el-table-column>
    <el-table-column prop="num" label="数量" width="80" align="center"></el-table-column>
    <el-table-column prop="money" label="订单价格" width="80" align="center"></el-table-column>
    <el-table-column label="操作"  align="center">
      <!--scope里面装着当前行所对应的对象信息
      scope.$index 得到当前行对应的对象在数组中的下标
      scope.row 得到当前行对应的对象
      -->
      <template slot-scope="scope">
        <el-button  size="mini" @click="deal(scope.row)"
                    type="success">处理</el-button>
      </template>
    </el-table-column>
  </el-table>

</div>
</template>

<script>
export default {
  name: "OrderList",
  data(){
    return{
      OrderArr:[{url:require("@/assets/imgs/106.jpg"),title:"山海经",num:20,money:200}]
    }
  },
  methods:{
    deal(order){

    }
  }
}
</script>

<style scoped>

</style>